<h1>Jobs List ::</h1>

<table width=100% border=0 cellspacing=3>
 	<tr>
 	<td width=50%>
 	     <div id="example" class="k-content">
 	
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
                </div>
    </td>
    <td valign=top>
    <!--   
     <div id="example" class="k-content">
    <div class="chart-wrapper">
                <div id="chart2"></div>
            </div>
      </div>
      -->
      <div class=k-content> 
     	 <div id=gridwork></div>
      </div>
    </td>
    </tr>
 </table>

            <style scoped>
                .chart-wrapper {
                	margin: 0 0 0 00px;
                	width: 300px;
                	height: 320px;
                	
                }
                
                .chart-wrapper .k-chart {
                    height: 220px;
                    padding: 10px;
                    width: 500px;
                }
            </style>       
        
        
<div id=grid></div>

<script>
	function createChart2() {
			    $("#chart2").kendoChart({
			        theme: $(document).data("kendoSkin") || "default",
			        title: {
			            text: "Work of month"
			        },
			        legend: {
			            position: "bottom"
			        },
			        seriesDefaults: {
			            type: "bar",
			            stack: true
			        },
			        series: [{
			            name: "Open Jobs",
			            data: [67.96, 128.93, 75, 74, 78]
			        }, {
			            name: "Completed",
			            data: [15.7, 16.7, 20, 23.5, 26.6]
			        }],
			        valueAxis: {
			            labels: {
			                format: "{0}  "
			            }
			        },
			        categoryAxis: {
			            categories: ["Jan", "Feb", "Mar", "Apr", "May"]
			        },
			        tooltip: {
			            visible: true,
			            format: "{0}  "
			        }
			    });
			}

			
			function createChart() {
			    $("#chart").kendoChart({
			        theme: $(document).data("kendoSkin") || "default",
			        title: {
			            text: "ระบบงาน QI ในระบบทั้งหมด"
			        },
			        legend: {
			            position: "right",
			            labels: {
			                template: "#= text # (#= value #%)"
			            }
			        },
			        seriesDefaults: {
			            labels: {
			                visible: true,
			                format: "{0}%"
			            }
			        },
			        series: [{
			            type: "pie",
			            data: [ {
			                category: "Open Jobs",
			                value: 22
			            }, {
			                category: "Waitting for Head Engineering",
			                value: 2
			            }, {
			                category: "Waiting for Department Manager",
			                value: 49
			            }, {
			                category: "Pending",
			                value: 27
			            } ]
			        }],
			        tooltip: {
			            visible: true,
			            format: "{0}%"
			        }
			    });
			}



                $(document).ready(function() {
                	setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);
                

                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:  {
                                url: "http://<?=$_SERVER["SERVER_ADDR"];?>/work/project2012-3/index.php/application/worklist",
                                dataType: "json"
                            },
                             
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 10,
                        
                    });
                    
                    setTimeout(function() {
                    	createChart();
                        createChart2();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                            createChart2();
                            
                        });
                    }, 500);

                  	$("#gridwork").kendoGrid({
                  		dataSource: dataSource,
                  		filterable: true,
                        pageable: true,
                        scrollable: false,
                  		columns: [ {
                            field: "mt_id",
                            title: "NO:"
                         } ],
 
                         editable: "popup"
          			 
                  	});
                  	
                    $("#grid").kendoGrid({
                    	dataSource: dataSource,
                    	sortable: {
                            mode: "single",
                           
                            allowUnsort: false
                        },
                   		filterable: true,
                        pageable: true,
                        scrollable: false,
                        columns: [ {
                                     field: "mt_id",
                                     title: "NO:"
                                  } ,
                                  {
                            field: "form_id",
                            title: "Form:"
                         } ,
                         {
                             field: "type_product",
                             title: "Ty[e"
                          } ,
                                 
                                  {
                                      field: "type_product",
                                      title: "Type Product:"
                                   } ,
                                   {
                                       field: "modify_date",
                                       title: "Date:"
                                    } ,
                                    {
                                        field: "modify_user",
                                        title: "User:"
                                     } ,
                                     {
                                         field: "start_date",
                                         title: "Start Date:"
                                      } ,
                                      {
                                          field: "end_date",
                                          title: "End Date"
                                       } ,
                                       
                                       { command: "view", title: "View", width: "210px" }], 
                                  editable: "popup"
                    });
                });
            </script>